<template>
	<div id="detail">
		<mainHeader></mainHeader>
		<div id="mai-detail">
			<div>
				<div class="content">
					<div class="recipes-info" style="float: left;">
						<ul>
							<li class="title">
								{{recipes.title}}
								<svg class="icon" aria-hidden="true">
									<use href="#icon-huaban"></use>
								</svg>
							</li>
							<li><img class="big-img" :src="recipes.albums" /></li>
							<li>
								<h2>用料</h2>
								<table>
									<tr v-for="item in ingredient">
										<td>{{item.name}}</td>
										<td>{{item.some}}</td>
									</tr>
								</table>
							</li>
							<li class="recipes-source" style="width: 529px;">
								<h2>美食介绍</h2> {{recipes.imtro}}
							</li>
							<li class="recipes-steps">
								<h2>{{recipes.title}}的做法</h2>
								<p v-for="step in recipes.steps">
									<span v-html="changeText(step.step)"></span>
									<img :src="step.img" alt="" />
								</p>
							</li>
						</ul>
					</div>

					<!--右列表-->
					<div class="recipes-list">
						<div v-for="(item,index) in recipesList" @click="showDesc(item.id)">
							<img :src="item.albums" />
							<p>{{item.title}}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<mainFooter></mainFooter>
	</div>
</template>
<script>
	import mainHeader from '@/components/mainHeader'
	import mainFooter from '@/components/mainFooter'
	import bus from '../bus.js'
	export default {
		name: 'detail',
		data() {
			return {
				msg: 'Welcome to Your Vue.js App',
				recipes: {},
				ingredient: [],
				catId: '',
				recipesList: [],
			}
		},
		components: {
			mainHeader,
			mainFooter
		},
		mounted() {
			var arr = this.$route.path.split('/');
			document.getElementsByTagName('body')[0].style.overflow = 'auto';
			var id = arr[arr.length - 1];
			var _this = this;
			this.$axios.get("/recipes/desc/" + id, {}).then(res => {
				_this.recipes = res.data.data;
				_this.recipes.steps = JSON.parse(_this.recipes.steps);
				_this.recipes.albums = JSON.parse(_this.recipes.albums)[0];
				_this.catId = _this.recipes.categoryId;
				var ings = _this.recipes.ingredients.split(';');
				for(var i = 0; i < ings.length; i++) {
					var ing = ings[i];
					var items = ing.split(',');
					_this.ingredient.push({
						'name': items[0],
						'some': items[1]
					});
				}
				var burdens = _this.recipes.burden.split(';');
				for(var i = 0; i < burdens.length; i++) {
					var burden = burdens[i];
					var items = burden.split(',');
					_this.ingredient.push({
						'name': items[0],
						'some': items[1]
					});
				}

				_this.$axios.get("/recipes/bycat/" + this.catId, {}).then(res => {
					_this.recipesList = res.data.data;
					for(var i = 0; i < _this.recipesList.length; i++) {
						_this.recipesList[i].albums = JSON.parse(_this.recipesList[i].albums)[0];
					}
				});
			});
			
			bus.$on('send', function(msg) {
				_this.$router.push({name:'home',params:{'title':msg}});
			})

		},
		methods: {
			showDesc(id) {
				var _this = this;
				this.$axios.get("/recipes/desc/" + id, {}).then(res => {
					_this.recipes = res.data.data;
					_this.recipes.steps = JSON.parse(_this.recipes.steps);
					_this.recipes.albums = JSON.parse(_this.recipes.albums)[0];
					_this.ingredient = [];
					var ings = _this.recipes.ingredients.split(';');
					console.log(_this.recipes.ingredients)
					for(var i = 0; i < ings.length; i++) {
						var ing = ings[i];
						var items = ing.split(',');
						_this.ingredient.push({
							'name': items[0],
							'some': items[1]
						});
					}
					var burdens = _this.recipes.burden.split(';');
					for(var i = 0; i < burdens.length; i++) {
						var burden = burdens[i];
						var items = burden.split(',');
						_this.ingredient.push({
							'name': items[0],
							'some': items[1]
						});
					}
				});
			},
		},
		computed:{
			changeText(text) {
				return(text) => {
					var text1 = text.substring(0,2);
					var text2 = text.substring(2);
					return '<font style="font-size:30px;color:#9c9346;font-style:italic;">'+text1+'</font>'+text2;
				}

			},
		}

	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	#detail {
		width: 100%;
		padding-top: 100px;
	}
	
	
	.title {
		font-size: 34px;
		color: #484348;
	}
	
	.row {
		background: #fff;
		border-color: #000000;
		width: 1000px;
		margin: 0 auto;
	}
	
	.big-img {
		width: 290px;
		height: 290px;
		border: 0;
		border-radius: 6px 6px 6px 6px;
	}
	
	h2 {
		color: #c7b971;
		margin-bottom: 10px;
		font-size: 24px;
		font-weight: 700;
	}
	
	table {
		width: 560px;
		font-size: 21px;
	}
	
	tr {}
	
	.recipes-info{
		width: 670px;
	}
	.recipes-steps img {
		width: 300px;
		border-radius: 6px 6px 6px 6px;
	}
	.recipes-steps p {
		width: 100%;
	}
	.recipes-steps p span{
		width: 370px;
		float: left;
	}
	.recipes-list {
		width: 330px;
		float: right;
		margin-top: 50px;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	.recipes-list img {
		width: 133px;
		border: 0;
		cursor: pointer;
	}
	.recipes-list div:hover {
		box-shadow: 0 0 15px #f66;
	}
	
	.recipes-list div {
		width: 133px;
		float: left;
		height: 163px;
		margin-bottom: 10px;
		box-shadow: 0 0 10px #f66#e1b0b0;
	}
	
	.recipes-list p{
		line-height: 30px;
		text-align: center;
	}
	
	.content{
		width: 1000px;
		margin: 0 auto;
	}
	#mai-detail{
		overflow: hidden;
	}
</style>